<template>
	<!-- //微信小程序 ：style="[]" 要用数组的形式 -->
	<view class="custom-page" :style="[customPage.page]" style="background-color: #FFFFFF;">
		
		<!-- navgation -->
		<view class="custom-navigation-bar" :style="[customPage.nav]">
			<view class="custom-navigation-inner">
				<view class="navigation-title"></view>
				
			</view>
		</view>
		<view class="page_bg"></view>
		<view class="flex-column page_content" style="z-index:2 ;">
			<swiper class="open_swiper"   @change="OnSwiperChange" :current="swiper_current" :style="[swiperConfig]">
				<swiper-item class="open_swiper_item"  >
					<view class="flex-column" style="width: 100%;height: auto;">
						<view class="open_h">夷陵智慧招商</view>
						<view class="open_h1" style="margin-top: 34rpx;">情润山水,夷陵天下</view>
					</view>
					<image class="open_img" 
						src="/static/images/open/open1.png"></image>
					<view class="flex-column" style="width: 100%;height: auto;">
						<view class="open_h1">国家园林城市</view>
						<view class="open_h1">中国优秀旅游城市</view>
						<view class="open_h1">全国文明卫生城市</view>
					</view>
				</swiper-item>
				<swiper-item class="open_swiper_item"  >
					<view class="flex-column " style="width: 100%;height: auto;">
						<view class="open_h">夷陵智慧招商</view>
						<view class="open_h1" style="margin-top: 34rpx;">情润山水·夷陵天下</view>
					</view>
					<image class="open_img"
						src="/static/images/open/oepn2.png"></image>
					<view class="flex-column" style="width: 100%;height: auto;">
						<view class="open_h1">优秀旅游城市·文化名城</view>
						<view class="open_h1">全国闻名城市</view>
					</view>
				</swiper-item>
				<swiper-item class="open_swiper_item" >
					<view class="flex-column" style="width: 100%;height: auto;">
						<view class="open_h">夷陵智慧招商</view>
						<view class="open_h1" style="margin-top: 34rpx;">为成功助力·为理想加油</view>
					</view>
					<image class="open_img" 
						src="/static/images/open/open3.png"></image>
					<view class="open_c_button" @tap.stop="OnConfirm()">立即体验</view>
				</swiper-item>
			</swiper>
			<!-- <view class="open_swiper">
				<view class="open_swiper_item" v-if="0==swiper_current">
					<view class="flex-column">
						<view class="open_h">夷陵智慧招商</view>
						<view class="open_h1">情润山水,夷陵天下</view>
					</view>
					<image class="open_img" :class="{'animation-bounce-right':0==swiper_current}"
						src="/static/images/open/open_1-min.png"></image>
					<view class="flex-column">
						<view class="open_h1">优秀旅游城市 | 文化名城</view>
						<view class="open_h1">全国文明城市</view>
					</view>

				</view>
				<view class="open_swiper_item" v-if="1==swiper_current">
					<view class="flex-column">
						<view class="open_h">夷陵智慧招商</view>
						<view class="open_h1">旅游之城，水电之都</view>
					</view>

					<image class="open_img" :class="{'animation-bounce-right':1==swiper_current}"
						src="/static/images/open/open_2-min.png"></image>
					<view class="flex-column">
						<view class="open_h1" style="margin: unset;">国家园林城市</view>
						<view class="open_h1" style="margin: unset;">中国优秀旅游城市</view>
						<view class="open_h1" style="margin: unset;">全国文明卫生城市</view>
					</view>
				</view>
				<view class="open_swiper_item" v-if="2==swiper_current">
					<view class="flex-column">
						<view class="open_h">夷陵智慧招商</view>
						<view class="open_h1">为成功助力，为理想加油</view>
					</view>
					<image class="open_img" :class="{'animation-bounce-right':2==swiper_current}"
						src="/static/images/open/open_3-min.png"></image>
					<view class="open_c_button" @tap.stop="OnConfirm()">立即体验</view>
				</view>
			</view> -->
			<view class="open_swiper_dots">
				<view class="open_swiper_dot" :class="{'open_swiper_dot_active':current==swiper_current}"
					v-for="current in 3"></view>
			</view>
			<!-- <view class="open_skip_button" v-if="swiper_current<2" @tap.stop="OnNext()">跳过</view> -->
		</view>
	</view>
</template>

<script>
	import Adpation from '@/library/platform/Adpation.js';
	import CustomNav from '@/library/mixins/customNav.js';
	export default {
		mixins: [Adpation, CustomNav],
		data() {
			return {
				swiper_current: 0,
				ISSUBMIT: false,
				swiperConfig:{
					width:0,
				    height:0
				}
			}
		},
		onLoad() {
			this.SetConfig();
		},
		methods: {
			// 设置swiper大小
			SetConfig() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.page_content')
					.boundingClientRect(res => {
						console.log(res)
						if (res && res.width && res.height) {
							this.swiperConfig.height = res.height+'px';
							this.swiperConfig.width = res.width+'px';
						}
					})
					.exec();
			
			},
			OnSwiperChange({
				detail
			}) {
				this.swiper_current = detail.current;
			},
			OnNext() {
				if (this.ISSUBMIT) return;
				this.ISSUBMIT = true;
				if (this.swiper_current < 2) {
					this.swiper_current++;
				} else {
					this.swiper_current = 0;
				}
				this.ISSUBMIT = false;
			},
			OnConfirm() {
				if (this.ISSUBMIT) return;
				this.ISSUBMIT = true;
				let self = this;
				uni.setStorageSync('IsSecondOpen',true);
				// uni.reLaunch({
				// 	url:'/pages/login/login',
				// 	complete() {
				// 		self.ISSUBMIT = false;
				// 	}
				// })
				uni.switchTab({
					url: '/pages/index/index',
					complete() {
						self.ISSUBMIT = false;

					}
				})

			}
		}
	}
</script>

<style>
	@import url('../../styles/layout/ani.css');
     .page_bg{
		 width: 100%;
		 height: 568rpx;
		 position: absolute;
		 top: 0;
		 left: 0;
		 background: linear-gradient(180deg,#DAE7FD 0%, #FFFFFF 100%);
		 z-index: 1;
	 }
	 
	.page_content {
		flex: 1;
		/**撑满父级空间*/
		width: 100%;
		font-family: 'PingFang SC-Medium';
	}

	.open_swiper {
		width: 100%;
		/* display: flex; */
	}

	.open_swiper_item {
		/* flex:1; */
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 140rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.open_swiper_dots {
		position: absolute;
		bottom: calc(40rpx + var(--page-bottom));
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: space-between;
		width: 130rpx;

	}

	.open_swiper_dot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: var(--theme-color);
		opacity: 0.5;
		transition: all .2s linear;
	}

	.open_swiper_dot_active {
		width: 60rpx;
		height: 20rpx;
		border-radius: 20rpx;
		opacity: 1;
	}

	.open_h {
		font-size: 48rpx;
		color:#1E1E1E ;
		letter-spacing: 2px;
		line-height: 80rpx;
		font-family: 'Alimama ShuHeiTi-Bold';
		font-weight: bold;
	}

	.open_h1 {
		margin-top: 24rpx;
		font-size: 32rpx;
		color: #7C8390;
		font-weight: 500;
		letter-spacing: 2px;
		line-height: 37.5rpx;
		
	}

	.open_h2 {}

	.open_img {
		width: 100%;
		height: 688rpx;
	}

	.open_c_button {
		width: 288rpx;
		height: 80rpx;
		border-radius: 100rpx;
		background-color: #FFFFFF;
		color: var(--theme-color);
		font-size: 32rpx;
		letter-spacing: 2px;
		text-align: center;
		line-height: 80rpx;
		border: 2px solid var(--theme-color);
	}

	.open_skip_button {

		position: absolute;
		bottom: calc(12rpx + var(--page-bottom));
		right: calc(58rpx + var(--page-right));
		width: 164rpx;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 8px;
		background-color: var(--theme-color);
		color: #FFFFFF;
		font-size: 28rpx;
		text-align: center;
	}
</style>